<template lang="">
    <div>
        展示分类
        <table>
            <tr>
                <td v-for='i in catelist'>
                    <button @click='changetype(i.id)' :class="i.id==typeid?'active':''">{{i.name}}</button>
                    </td>
            </tr>
        </table>
        展示记录
        <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr v-for='i in recordlist'>
                        <td>{{i.stime}}</td>
                        <td>{{i.etime}}</td>
                        <td>{{i.money}}</td>
                        <td>
                            <route-Link>详情</route-Link>
                        </td>
                    </tr>
            </table>
    </div>
</template>
<script>
export default {
    data(){
        return{
            catelist:[],
            recordlist:[],
            typeid:0
        }
    },
    methods: {
        getcatelist(){
            this.$axios.get('text/cateM').then(res=>{
                this.catelist = res.data.list
                this.getrescorlist()
            })
        },
        getrescorlist(){
            this.$axios.get('text/recordM?typeid='+this.typeid).then(res=>{
                this.recordlist = res.data.list
            })
        },
        //改变分类，点击某个分类，展示此分类下的记录
        changetype(typeid){
            this.typeid = typeid
            this.getrescorlist()
        }
    },
    mounted() {
        this.getcatelist()
    },
}
</script>
<style lang="">
.active{
    background-color: red;
}
</style>